<template>
  <v-sheet class="min-h-screen bg-gray-50 dark:bg-gray-900 pt-16">
    <v-container
      max-width="1280"
      class="px-0 pb-16"
    >
      <v-row class="px-6 md:px-12 pt-6 md:pt-10">
        <v-col cols="12" class="text-center">
          <h1 class="text-[clamp(1.75rem,5vw,2.5rem)] font-bold text-gray-800 dark:text-white leading-tight mb-4">
            {{ activityInfo.name }}
          </h1>
          
          <div class="flex flex-wrap justify-center items-center gap-x-6 gap-y-2 text-gray-500 dark:text-gray-400 text-sm md:text-base">
            <span class="flex items-center">
              <v-icon size="16" class="mr-1">mdi-calendar</v-icon>
              {{ formatDate(activityInfo.create_time) }}
            </span>
            <!-- <span v-if="activityDetailData.author" class="flex items-center">
              <v-icon size="16" class="mr-1">mdi-account</v-icon>
              {{ activityDetailData.author }}
            </span>
            <span v-if="activityDetailData.category" class="flex items-center">
              <v-icon size="16" class="mr-1">mdi-tag</v-icon>
              {{ activityDetailData.category }}
            </span> -->
          </div>
        </v-col>
      </v-row>

      <v-row class="my-6 md:my-10 px-4">
        <v-col cols="12">
          <v-sheet
            class="rounded-xl overflow-hidden"
          >
            <v-img
              :src="activityInfo.headerurl"
              :alt="activityInfo.title"
              class="w-full h-[200px] sm:h-[300px] md:h-[450px] lg:h-[550px] object-cover"
              lazy-src="https://picsum.photos/800/400?blur=2"
            >
            </v-img>
          </v-sheet>
        </v-col>
      </v-row>

      <v-row class="px-4">
        <v-col
          cols="12"
          md="12"
          class="px-2 md:px-6"
        >
          <v-sheet
            color="white dark:bg-gray-800"
            rounded-xl
            p-6 md:p-8
            class="prose dark:prose-invert max-w-none"
          >
            <div
              class="ql-editor content-detail"
              v-html="activityInfo.content"
            ></div>
          </v-sheet>

          <!-- <div class="mt-12">
            <h2 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-white mb-6">
              相关推荐
            </h2>
            <v-row>
              <v-col
                cols="6"
                md="4"
                v-for="(item, i) in relatedActivities"
                :key="i"
                class="px-6 mb-4"
              >
                <v-card
                  class="h-full pt-4 rounded-xl overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
                  @click="handleRelatedClick(item)"
                >
                  <v-img
                    :src="item.imgurl"
                    :alt="item.title"
                    class="h-40 object-cover"
                  ></v-img>
                  <v-card-text class="p-4 text-center">
                    <h3 class="font-medium text-gray-800 dark:text-white line-clamp-2 text-sm md:text-base">
                      {{ item.title }}
                    </h3>
                    <p class="text-gray-500 text-xs mt-2">
                      {{ formatDate(item.create_time) }}
                    </p>
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>
          </div> -->
        </v-col>
      </v-row>
    </v-container>
  </v-sheet>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const { locale, setLocale, tm } = useI18n();
const seo_title = computed(() => {
  return tm("shop.seo.title");
})
const seo_ogTitle = computed(() => {
  return tm("shop.seo.ogTitle");
})
const seo_description = computed(() => {
  return tm("shop.seo.description");
})
const seo_ogDescription = computed(() => {
  return tm("shop.seo.ogDescription");
})

const { $axios } = useNuxtApp();

const route = useRoute();

const activityInfo = ref<any>({
  headerurl: "",
  title: "",
  content: "",
});
const activityDetailLoad = ref<boolean>(false);
const fetchActivityInfo = async () => {
  try {
    activityDetailLoad.value = false;
    const { isSuccess, data } = await $axios.get<any>(
      "/queryActivityDetail?hid=" + route.query.id
    );

    if (isSuccess) {
      activityInfo.value = data;
      activityDetailLoad.value = true;
      // SEO 会根据中英文切换做不同的SEO
      useSeoMeta({
        keywords: activityInfo.value.seoKeywords || tm("shop.seo.keywords"),
        title: activityInfo.value.name,
        ogTitle: activityInfo.value.name,
        description: activityInfo.value.desc,
        ogDescription: activityInfo.value.desc,
        ogImage: activityInfo.value.headerurl
      })
    }

    console.log("获取数据成功 => ", activityInfo.value);
  } catch (error) {
    console.error("请求失败", error);
  }
};

// 格式化日期
const formatDate = (dateString: any) => {
  if (!dateString) return "";
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};


onMounted(() => {
  fetchActivityInfo();
});

</script>

<style scoped>
/* 内容详情样式 */
.content-detail {
  color: #333;
  line-height: 1.8;
}

.dark .content-detail {
  color: #e0e0e0;
}

.content-detail h2,
.content-detail h3,
.content-detail h4 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: #222;
  font-weight: 600;
}

.dark .content-detail h2,
.dark .content-detail h3,
.dark .content-detail h4 {
  color: #fff;
}

.content-detail p {
  margin-bottom: 1rem;
}

.content-detail ul,
.content-detail ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.content-detail li {
  margin-bottom: 0.5rem;
}

.content-detail img {
  max-width: 100%;
  height: auto;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .content-detail {
    font-size: 16px;
  }
  
  .content-detail h2 {
    font-size: 22px;
  }
  
  .content-detail h3 {
    font-size: 19px;
  }
}
</style>